<template>
    <div class="app-container" style="padding:20px">
        <el-card>
            <FormTopBar title="酒店申请单" :flowInsId="form.flowInsId" :taskId="taskId" :businessId="form.id"
                        :billType="form.billType" @submitForm="submitForm"></FormTopBar>
        </el-card>
        <FlowInfoCard  :id="form.id+''" :billType="form.billType" :flowInsId="form.flowInsId">
            <!-- 添加或修改员工入职对话框 -->
            <el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="readonly">
                <el-card class="top15">
                    <div slot="header" class="clearfix">
                        <span>基础信息</span>
                        <span style="float: right" v-if="form.id!=undefined">单据编号：{{form.billCode}}</span>
                    </div>

                    <el-row>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="酒店名称" prop="hotelName">
                                <el-input v-model="form.hotelName" placeholder="请输入酒店名称"/>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="所在城市" prop="applyCity">
                                <el-input v-model="form.applyCity" placeholder="请输入所在城市"/>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="所在街道" prop="street">
                                <el-input v-model="form.street" placeholder="请输入所在街道"/>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="房间类型" prop="roomType">
                                <el-select v-model="form.roomType" placeholder="请选择房间类型">
                                    <el-option v-for="dict in dict.type.office_hotel_room_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="房间等级" prop="roomLevel">
                                <el-select v-model="form.roomLevel" placeholder="请选择房间等级">
                                    <el-option v-for="dict in dict.type.office_hotel_room_level" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="房间数量" prop="roomCount">
                                <el-input v-model="form.roomCount" placeholder="请输入房间数量"/>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="入住人数" prop="userCount">
                                <el-input v-model="form.userCount" placeholder="请输入入住人数"/>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="入住时间" prop="useTime">
                                <el-date-picker clearable v-model="form.useTime" type="date"
                                    value-format="yyyy-MM-dd" placeholder="请选择入住时间"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="预计金额" prop="totalAmt">
                                <el-input v-model="form.totalAmt" placeholder="请输入预计金额"/>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-form-item label="事项描述">
                            <editor v-model="form.reasonDes" :min-height="260" :readonly="readonly"/>
                        </el-form-item>
                    </el-row>

                </el-card>
            </el-form>
        </FlowInfoCard>
    </div>
</template>

<script>
import FlowInfo from "@/views/workflow/flow/flowInfo";
import FormTopBar from "@/views/workflow/common/formTopBar";
import {addHotelApply, getHotelApply, updateHotelApply} from "@/api/oa/hotelApply";
import FlowInfoCard from "@/views/workflow/common/flowinfoCard";
export default {
    name: "HotelApplyForm",
    dicts: ['office_hotel_room_type','office_hotel_room_level'],
    components:{FlowInfo,FormTopBar,FlowInfoCard},
    data() {
        return {
            // 表单参数
            form: {
            },
            showFlowInfo:false,
            taskId:'',
            // billType:'',
            readonly:false,
            // 表单校验
            rules: {
                applyCity: [
                    {required: true, message: "使用城市不能为空", trigger: "blur"}
                ],
                street: [
                    {required: true, message: "所在街道不能为空", trigger: "blur"}
                ],
                hotelName: [
                    {required: true, message: "酒店名称不能为空", trigger: "blur"}
                ],
                totalAmt: [
                    {required: true, message: "预计金额不能为空", trigger: "blur"}
                ],
                roomType: [
                    {required: true, message: "房间类型不能为空", trigger: "change"}
                ],
                roomCount: [
                    {required: true, message: "房间数量不能为空", trigger: "blur"}
                ],
                roomLevel: [
                    {required: true, message: "房间等级不能为空", trigger: "change"}
                ],
                userCount: [
                    {required: true, message: "入住人数不能为空", trigger: "blur"}
                ],
                useTime: [
                    {required: true, message: "入住时间不能为空", trigger: "blur"}
                ],
            },
            showCommitDialog:false,
            commitType:"",
        };
    },
    provide(){
        return {
            addCcedList:this.addCcedList
        }
    },
    created() {
        //单据的id主键
        const formId = this.$route.params && this.$route.params.formId;
        //单据的类型
        const billType = this.$route.params && this.$route.params.billType;
        const taskId = this.$route.query && this.$route.query.taskId;
        const readonly = this.$route.query && this.$route.query.readonly;
        if(billType){
            this.form.billType = billType;
        }
        if(taskId){
            this.taskId = taskId;
        }
        if("1"==readonly){
            this.readonly = true;
        }
        if(formId){
            this.form.id = formId;
            this.getDetailData(formId);
        }
    },
    mounted() {
    },
    methods: {
        //  获取单据信息
        getDetailData(id) {
            getHotelApply(id).then(response => {
                this.form = response.data;
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {
                        updateHotelApply(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.closeThisPage();
                        });
                    } else {
                        addHotelApply(this.form).then(response => {
                            this.$modal.msgSuccess("保存成功");
                            this.closeThisPage();
                        });
                    }
                }
            });
        },
        closeThisPage(){
            this.$tab.closeOpenPage({ path: "/commonApply/hotelApply",query: {billType:this.form.billType}});
        },
        // 创建单据时候，选择了抄送人
        addCcedList(ccedList){
            this.form.ccedList = ccedList;
            console.log("回填抄送人")
            console.log(this.form)
        }
    }
};
</script>
<style lang="scss" scoped>

.label{
    font-size: 14px;
    color: #606266;
    font-weight: 900;
}

.price{
    color: red;
    font-size: 20px;
    font-weight: 900;
}

.priceItem{
    color: red;
    font-size: 18px;
}
</style>
